<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form isheader" v-if="headerShow" style="margin-top: 20px;">
                <div>
                    <a-form size="small" :model="pageData" layout="inline">
                        <a-form-item label="结束时间">
                            <a-date-picker  popup-container="html"  class="bacClass" style="width: 200px;" @select="onSelect" @clear="onClear"
                                v-model="pageData.dropDownData.startDate" />至
                            <a-date-picker  popup-container="html"  class="bacClass" style="width: 200px;" @select="onSelect" @clear="onClear"
                                v-model="pageData.dropDownData.endDate" />
                        </a-form-item>
                    </a-form>
                </div>
                <div>
                    <Toolbar :items="['查询', '导出']" @select="selectHandler" @export="exports"></Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
        </template>
        <template #pageTabel>
            <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width:100%;z-index:999 ;">
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressDragLeaveHidesColumns="true"
                    :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady"
                    style="height:99%" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="table.dataList"
                    :columnDefs="tc" :localeText="localeText1" @columnResized="onColumnResized"
                    @columnMoved="onColumnMoved"></AgGridVuesCopys>
            </a-spin>
        </template>
        <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
            @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="pagination.pageSize"
            :current="pagination.page" />
    </pageTabelLayout>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table';
import emitter from "@/hooks/useEventBus";
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue';
import { Form, Message, Modal } from '@arco-design/web-vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { String } from 'lodash';
import { baseURL } from '@/api/axios.config'
import axios from "axios";
import usePermission from '@/store/modules/permission'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import validate from "@/hooks/useValidate";
import filedownload from 'js-file-download'
import dayjs from 'dayjs'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

interface DyeTankProduction {
    "id": any
    "remark": any
}

export default {
    name: "DyeTankProduction",
    setup() {
        const total = ref(0);
        const page = ref(1);
        const size = ref(10);

        function PageSize(val: any) {
            pagination.page = val
            doRefresh();
        }

        function change1(val: any) {
            pagination.pageSize = val
            doRefresh();
        }

        function doRefresh() {
            pageData.pageLoading = true
            var startDate = pageData.dropDownData.startDate
            var endDate = pageData.dropDownData.endDate
            let data1 = startDate
            let data2 = endDate
            var formatDate1 = new Date(startDate)
            var formatDate2 = new Date(endDate)
            if (formatDate1 > formatDate2) {
                startDate = data2 ? data2 + ' 00:00:00' : ''
                endDate = data1 ? data1 + ' 23:59:59' : ''
            } else {
                startDate = data1 ? data1 + ' 00:00:00' : ''
                endDate = data2 ? data2 + ' 23:59:59' : ''
            }
            // updateGridState01()
            post({
                url: "/pdm/TransitInspect/selectZK",
                data: {
                    page: pagination.page,
                    size: pagination.pageSize,
                    deleteState: 0,
                    startDate: startDate,
                    endDate: endDate,
                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {
                        table.handleSuccess(data.list);
                        gridOption.value.setRowData(data.list);
                        total.value = data.total;
                        for (let i = 0; i < data.list.length; i++) {
                            var time = data.list[i].StartDateTime; //新建一个日期对象，默认现在的时间
                            var time1 = data.list[i].EndDateTime;
                            var timestamp = Date.parse(time) / 1000	//调用getTime()方法获取毫秒数
                            var timestamp1 = Date.parse(time1) / 1000
                            var runTime = parseInt(timestamp1 - timestamp)
                            // var year = Math.floor(runTime / 86400 / 365)
                            // runTime = runTime % (86400 * 365)
                            // var month = Math.floor(runTime / 86400 / 30)
                            // runTime = runTime % (86400 * 30)
                            var day = Math.floor(runTime / 86400)
                            runTime = runTime % 86400
                            var hour = Math.floor(runTime / 3600)
                            runTime = runTime % 3600
                            var minute = Math.floor(runTime / 60)
                            runTime = runTime % 60
                            var second = runTime
                            data.list[i].realityDate = day + '天' + hour + '时' + minute + '分' + second + '秒'
                        }
                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                })
        }

        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const rowKey = useRowKey("id");
        const tableColumns = useTableColumn([
            {
                title: "车间",
                key: "workshop",
                dataIndex: "workshop",
            },
            {
                title: "设备编号",
                key: "machineOdd",
                dataIndex: "machineOdd",
            },
            {
                title: "设备类型",
                key: "controlMachineType",
                dataIndex: "controlMachineType",
            },
            {
                title: "管数",
                key: "tubeType",
                dataIndex: "tubeType",
            },
            {
                title: "工艺时间",
                key: "craftDate",
                dataIndex: "craftDate",
            },
            {
                title: "实际时间",
                key: "realityDate",
                dataIndex: "realityDate",
            },
            {
                title: "MachineNo",
                key: "MachineNo",
                dataIndex: "MachineNo",
            },
            {
                title: "MachineName",
                key: "MachineName",
                dataIndex: "MachineName",
            },
            {
                title: "BatchName",
                key: "BatchName",
                dataIndex: "BatchName",
            },
            {
                title: "UserBatchNo",
                key: "UserBatchNo",
                dataIndex: "UserBatchNo",
            },

            {
                title: "CustomerName",
                key: "CustomerName",
                dataIndex: "CustomerName",
            },
            {
                title: "StartDateTime",
                key: "StartDateTime",
                dataIndex: "StartDateTime",
            },
            {
                title: "EndDateTime",
                key: "EndDateTime",
                dataIndex: "EndDateTime",
            },
            {
                title: "RunTime",
                key: "RunTime",
                dataIndex: "RunTime",
            },
            {
                title: "CC_RunTime",
                key: "CC_RunTime",
                dataIndex: "CC_RunTime",
            },
            {
                title: "Order_Name",
                key: "Order_Name",
                dataIndex: "Order_Name",
            },
            {
                title: "Order_Weight",
                key: "Order_Weight",
                dataIndex: "Order_Weight",
            },
            {
                title: "Cloth_Mode",
                key: "Cloth_Mode",
                dataIndex: "Cloth_Mode",
            },
            {
                title: "Color_Number",
                key: "Color_Number",
                dataIndex: "Color_Number",
            },
            {
                title: "Operator",
                key: "Operator",
                dataIndex: "Operator",
            },

            {
                title: "CC_Recipe",
                key: "CC_Recipe",
                dataIndex: "CC_Recipe",
            },
            {
                title: "Working_Mode",
                key: "Working_Mode",
                dataIndex: "Working_Mode",
            },
            {
                title: "DyeProgName1",
                key: "DyeProgName1",
                dataIndex: "DyeProgName1",
            },
            {
                title: "DyeProgName2",
                key: "DyeProgName2",
                dataIndex: "DyeProgName2",
            },
            {
                title: "DyeProgName3",
                key: "DyeProgName3",
                dataIndex: "DyeProgName3",
            },
            {
                title: "DyeProgName4",
                key: "DyeProgName4",
                dataIndex: "DyeProgName4",
            },
            {
                title: "DyeProgName5",
                key: "DyeProgName5",
                dataIndex: "DyeProgName5",
            },
            {
                title: "DyeProgName6",
                key: "DyeProgName6",
                dataIndex: "DyeProgName6",
            },
            {
                title: "DyeProgName7",
                key: "DyeProgName7",
                dataIndex: "DyeProgName7",
            },
            {
                title: "DyeProgName8",
                key: "DyeProgName8",
                dataIndex: "DyeProgName8",
            },

            {
                title: "DyeProgName9",
                key: "DyeProgName9",
                dataIndex: "DyeProgName9",
            },
            {
                title: "DyeProgName10",
                key: "DyeProgName10",
                dataIndex: "DyeProgName10",
            },
            {
                title: "DyeProgName11",
                key: "DyeProgName11",
                dataIndex: "DyeProgName11",
            },
            {
                title: "DyeProgName12",
                key: "DyeProgName12",
                dataIndex: "DyeProgName12",
            },
            {
                title: "DyeProgName13",
                key: "DyeProgName13",
                dataIndex: "DyeProgName13",
            },
            {
                title: "DyeProgName14",
                key: "DyeProgName14",
                dataIndex: "DyeProgName14",
            },
            {
                title: "DyeProgName15",
                key: "DyeProgName15",
                dataIndex: "DyeProgName15",
            },
            {
                title: "DyeProg1_ID",
                key: "DyeProg1_ID",
                dataIndex: "DyeProg1_ID",
            },
            {
                title: "DyeProg2_ID",
                key: "DyeProg2_ID",
                dataIndex: "DyeProg2_ID",
            },
            {
                title: "DyeProg3_ID",
                key: "DyeProg3_ID",
                dataIndex: "DyeProg3_ID",
            },

            {
                title: "DyeProg4_ID",
                key: "DyeProg4_ID",
                dataIndex: "DyeProg4_ID",
            },
            {
                title: "DyeProg5_ID",
                key: "DyeProg5_ID",
                dataIndex: "DyeProg5_ID",
            },
            {
                title: "DyeProg6_ID",
                key: "DyeProg6_ID",
                dataIndex: "DyeProg6_ID",
            },
            {
                title: "DyeProg7_ID",
                key: "DyeProg7_ID",
                dataIndex: "DyeProg7_ID",
            },
            {
                title: "DyeProg8_ID",
                key: "DyeProg8_ID",
                dataIndex: "DyeProg8_ID",
            },
            {
                title: "DyeProg9_ID",
                key: "DyeProg9_ID",
                dataIndex: "DyeProg9_ID",
            },
            {
                title: "DyeProg10_ID",
                key: "DyeProg10_ID",
                dataIndex: "DyeProg10_ID",
            },
            {
                title: "DyeProg11_ID",
                key: "DyeProg11_ID",
                dataIndex: "DyeProg11_ID",
            },
            {
                title: "DyeProg12_ID",
                key: "DyeProg12_ID",
                dataIndex: "DyeProg12_ID",
            },
            {
                title: "DyeProg13_ID",
                key: "DyeProg13_ID",
                dataIndex: "DyeProg13_ID",
            },

            {
                title: "DyeProg14_ID",
                key: "DyeProg14_ID",
                dataIndex: "DyeProg14_ID",
            },
            {
                title: "DyeProg15_ID",
                key: "DyeProg15_ID",
                dataIndex: "DyeProg15_ID",
            },
            {
                title: "Loading",
                key: "Loading",
                dataIndex: "Loading",
            },
            {
                title: "Ratio1",
                key: "Ratio1",
                dataIndex: "Ratio1",
            },
            {
                title: "Ratio2",
                key: "Ratio2",
                dataIndex: "Ratio2",
            },
            {
                title: "Ratio3",
                key: "Ratio3",
                dataIndex: "Ratio3",
            },
            {
                title: "Ratio4",
                key: "Ratio4",
                dataIndex: "Ratio4",
            },
            {
                title: "Ratio5",
                key: "Ratio5",
                dataIndex: "Ratio5",
            },
            {
                title: "Tank_Ratio1",
                key: "Tank_Ratio1",
                dataIndex: "Tank_Ratio1",
            },
            {
                title: "Tank_Ratio2",
                key: "Tank_Ratio2",
                dataIndex: "Tank_Ratio2",
            },

            {
                title: "Tank_Ratio3",
                key: "Tank_Ratio3",
                dataIndex: "Tank_Ratio3",
            },
            {
                title: "Tank_Ratio4",
                key: "Tank_Ratio4",
                dataIndex: "Tank_Ratio4",
            },
            {
                title: "Tank_Ratio5",
                key: "Tank_Ratio5",
                dataIndex: "Tank_Ratio5",
            },
            {
                title: "Tank_Ratio6",
                key: "Tank_Ratio6",
                dataIndex: "Tank_Ratio6s",
            },
            {
                title: "Tank_Ratio7",
                key: "Tank_Ratio7",
                dataIndex: "Tank_Ratio7",
            },
            {
                title: "Tank_Ratio8",
                key: "Tank_Ratio8",
                dataIndex: "Tank_Ratio8",
            },
            {
                title: "PressureCtrl_1",
                key: "PressureCtrl_1",
                dataIndex: "PressureCtrl_1",
            },
            {
                title: "PressureCtrl_2",
                key: "PressureCtrl_2",
                dataIndex: "PressureCtrl_2",
            },
            {
                title: "PressureCtrl_3",
                key: "PressureCtrl_3",
                dataIndex: "PressureCtrl_3",
            },
            {
                title: "Target_Temp_1",
                key: "Target_Temp_1",
                dataIndex: "Target_Temp_1",
            },

            {
                title: "Target_Temp_2",
                key: "Target_Temp_2",
                dataIndex: "Target_Temp_2",
            },
            {
                title: "Target_Temp_3",
                key: "Target_Temp_3",
                dataIndex: "Target_Temp_3",
            },
            {
                title: "Target_Temp_4",
                key: "Target_Temp_4",
                dataIndex: "Target_Temp_4",
            },
            {
                title: "Target_Temp_5",
                key: "Target_Temp_5",
                dataIndex: "Target_Temp_5",
            },
            {
                title: "Target_Temp_6",
                key: "Target_Temp_6",
                dataIndex: "Target_Temp_6",
            },
            {
                title: "HoldTime_1",
                key: "HoldTime_1",
                dataIndex: "HoldTime_1",
            },
            {
                title: "HoldTime_2",
                key: "HoldTime_2",
                dataIndex: "HoldTime_2",
            },
            {
                title: "HoldTime_3",
                key: "HoldTime_3",
                dataIndex: "HoldTime_3",
            },
            {
                title: "HoldTime_4",
                key: "HoldTime_4",
                dataIndex: "HoldTime_4",
            },
            {
                title: "HoldTime_5",
                key: "HoldTime_5",
                dataIndex: "HoldTime_5",
            },

            {
                title: "HoldTime_6",
                key: "HoldTime_6",
                dataIndex: "HoldTime_6",
            },
            {
                title: "MainPump_Speed_Set_1",
                key: "MainPump_Speed_Set_1",
                dataIndex: "MainPump_Speed_Set_1",
            },
            {
                title: "MainPump_Speed_Set_2",
                key: "MainPump_Speed_Set_2",
                dataIndex: "MainPump_Speed_Set_2",
            },
            {
                title: "MainPump_Speed_Set_3",
                key: "MainPump_Speed_Set_3",
                dataIndex: "MainPump_Speed_Set_3",
            },
            {
                title: "Roller_Speed_Set_1",
                key: "Roller_Speed_Set_1",
                dataIndex: "Roller_Speed_Set_1",
            },
            {
                title: "Roller_Speed_Set_2",
                key: "Roller_Speed_Set_2",
                dataIndex: "Roller_Speed_Set_2",
            },
            {
                title: "Roller_Speed_Set_3",
                key: "Roller_Speed_Set_3",
                dataIndex: "Roller_Speed_Set_3",
            },
            {
                title: "Mul_Value",
                key: "Mul_Value",
                dataIndex: "Mul_Value",
            },
            {
                title: "Fix_Vol",
                key: "Fix_Vol",
                dataIndex: "Fix_Vol",
            },
            {
                title: "Debt_Vol_Word",
                key: "Debt_Vol_Word",
                dataIndex: "Debt_Vol_Word",
            },

            {
                title: "Debt_Percentage",
                key: "Debt_Percentage",
                dataIndex: "Debt_Percentage",
            },
            {
                title: "Fan_Speed_1",
                key: "Fan_Speed_1",
                dataIndex: "Fan_Speed_1",
            },
            {
                title: "Fan_Speed_2",
                key: "Fan_Speed_2",
                dataIndex: "Fan_Speed_2",
            },
            {
                title: "Fan_Speed_3",
                key: "Fan_Speed_3",
                dataIndex: "Fan_Speed_3",
            },
            {
                title: "Plater_Speed_1",
                key: "Plater_Speed_1",
                dataIndex: "Plater_Speed_1",
            },
            {
                title: "Plater_Speed_2",
                key: "Plater_Speed_2",
                dataIndex: "Plater_Speed_2",
            },
            {
                title: "Plater_Speed_3",
                key: "Plater_Speed_3",
                dataIndex: "Plater_Speed_3",
            },
            {
                title: "Nozzle_Pos_Set_1",
                key: "Nozzle_Pos_Set_1",
                dataIndex: "Nozzle_Pos_Set_1",
            },
            {
                title: "Nozzle_Pos_Set_2",
                key: "Nozzle_Pos_Set_2",
                dataIndex: "Nozzle_Pos_Set_2",
            },
            {
                title: "Nozzle_Pos_Set_3",
                key: "Nozzle_Pos_Set_3",
                dataIndex: "Nozzle_Pos_Set_3",
            },

            {
                title: "Water_Vol1_Total",
                key: "Water_Vol1_Total",
                dataIndex: "Water_Vol1_Total",
            },
            {
                title: "Water_Vol2_Total",
                key: "Water_Vol2_Total",
                dataIndex: "Water_Vol2_Total",
            },
            {
                title: "Water_Vol3_Total",
                key: "Water_Vol3_Total",
                dataIndex: "Water_Vol3_Total",
            },
            {
                title: "Water_Vol4_Total",
                key: "Water_Vol4_Total",
                dataIndex: "Water_Vol4_Total",
            },
            {
                title: "Steam_Vol_Total",
                key: "Steam_Vol_Total",
                dataIndex: "Steam_Vol_Total",
            },
            {
                title: "Power_Total",
                key: "Power_Total",
                dataIndex: "Power_Total",
            },
            {
                title: "CC_Water_Vol1_Total",
                key: "CC_Water_Vol1_Total",
                dataIndex: "CC_Water_Vol1_Total",
            },
            {
                title: "CC_Water_Vol2_Total",
                key: "CC_Water_Vol2_Total",
                dataIndex: "CC_Water_Vol2_Total",
            },
            {
                title: "CC_Water_Vol3_Total",
                key: "CC_Water_Vol3_Total",
                dataIndex: "CC_Water_Vol3_Total",
            },
            {
                title: "CC_Water_Vol4_Total",
                key: "CC_Water_Vol4_Total",
                dataIndex: "CC_Water_Vol4_Total",
            },

            {
                title: "CC_Steam_Vol_Total",
                key: "CC_Steam_Vol_Total",
                dataIndex: "CC_Steam_Vol_Total",
            },
            {
                title: "UpdateTime",
                key: "UpdateTime",
                dataIndex: "UpdateTime",
            },
        ]);

        let tc: any[] = tableColumns.map((o) => {
            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            obj['width'] = 150
            return obj
        })

        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        tc = a.concat(tc)

        const pageData = reactive<{
            dropDownData: any,
            pageLoading: boolean,
        }>({
            dropDownData: {
                startDate: dayjs().subtract(7,'day').format('YYYY-MM-DD'),
                endDate: dayjs().format('YYYY-MM-DD'),
            },
            pageLoading: false,
        });

        onMounted(() => {
            emitter.on("DyeTankProduction", () => {
                doRefresh();
            });
        });

        //查询
        const selectHandler = () => {
            pagination.page = 1
            doRefresh();
        }

        const dataForm = reactive<DyeTankProduction>({
            "id": null,
            "remark": '',
        })

        // 表格准备事件
        const gridOption = ref()
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
            colState.value = params.columnApi
        }

        //导出
        const exports = () => {
            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选数据!');
                return
            } else {
                let idList: any = []
                gridOption.value.getSelectedRows().forEach(function (o: any) {
                    idList.push(o['id'])
                })
                //将表头拼接出来
                let head = "<th>车间</th><th>设备编号</th><th>设备类型</th><th>管数</th><th>工艺时间</th><th>实际时间</th><th>MachineNo</th><th>MachineName</th><th>BatchName</th><th>UserBatchNo</th>"
                head += "<th>CustomerName</th><th>StartDateTime</th><th>EndDateTime</th><th>RunTime</th><th>CC_RunTime</th><th>Order_Name</th><th>Order_Weight</th><th>Cloth_Mode</th><th>Color_Number</th><th>Operator</th>"
                head += "<th>CC_Recipe</th><th>Working_Mode</th><th>DyeProgName1</th><th>DyeProgName2</th><th>DyeProgName3</th><th>DyeProgName4</th><th>DyeProgName5</th><th>DyeProgName6</th><th>DyeProgName7</th><th>DyeProgName8</th>"
                head += "<th>DyeProgName9</th><th>DyeProgName10</th><th>DyeProgName11</th><th>DyeProgName12</th><th>DyeProgName13</th><th>DyeProgName14</th><th>DyeProgName15</th><th>DyeProg1_ID</th><th>DyeProg2_ID</th><th>DyeProg3_ID</th>"
                head += "<th>DyeProg4_ID</th><th>DyeProg5_ID</th><th>DyeProg6_ID</th><th>DyeProg7_ID</th><th>DyeProg8_ID</th><th>DyeProg9_ID</th><th>DyeProg10_ID</th><th>DyeProg11_ID</th><th>DyeProg12_ID</th><th>DyeProg13_ID</th>"
                head += "<th>DyeProg14_ID</th><th>DyeProg15_ID</th><th>Loading</th><th>Ratio1</th><th>Ratio2</th><th>Ratio3</th><th>Ratio4</th><th>Ratio5</th><th>Tank_Ratio1</th><th>Tank_Ratio2</th>"
                head += "<th>Tank_Ratio3</th><th>Tank_Ratio4</th><th>Tank_Ratio5</th><th>Tank_Ratio6</th><th>Tank_Ratio7</th><th>Tank_Ratio8</th><th>PressureCtrl_1</th><th>PressureCtrl_2</th><th>PressureCtrl_3</th><th>Target_Temp_1</th>"
                head += "<th>Target_Temp_2</th><th>Target_Temp_3</th><th>Target_Temp_4</th><th>Target_Temp_5</th><th>Target_Temp_6</th><th>HoldTime_1</th><th>HoldTime_2</th><th>HoldTime_3</th><th>HoldTime_4</th><th>HoldTime_5</th>"
                head += "<th>HoldTime_6</th><th>MainPump_Speed_Set_1</th><th>MainPump_Speed_Set_2</th><th>MainPump_Speed_Set_3</th><th>Roller_Speed_Set_1</th><th>Roller_Speed_Set_2</th><th>Roller_Speed_Set_3</th><th>Mul_Value</th><th>Fix_Vol</th><th>Debt_Vol_Word</th>"
                head += "<th>Debt_Percentage</th><th>Fan_Speed_1</th><th>Fan_Speed_2</th><th>Fan_Speed_3</th><th>Plater_Speed_1</th><th>Plater_Speed_2</th><th>Plater_Speed_3</th><th>Nozzle_Pos_Set_1</th><th>Nozzle_Pos_Set_2</th><th>Nozzle_Pos_Set_3</th>"
                head += "<th>Water_Vol1_Total</th><th>Water_Vol2_Total</th><th>Water_Vol3_Total</th><th>Water_Vol4_Total</th><th>Steam_Vol_Total</th><th>Power_Total</th><th>CC_Water_Vol1_Total</th><th>CC_Water_Vol2_Total</th><th>CC_Water_Vol3_Total</th><th>CC_Water_Vol4_Total</th>"
                head += "<th>CC_Steam_Vol_Total</th><th>UpdateTime</th>"

                //拿到当前表格数据与勾选的行做筛选
                let nowRow = table.dataList.filter(function (o: any) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id }).indexOf(o['id']) !== -1)
                })
                let body = "";
                nowRow.forEach(function (o) {
                    body += "<tr><td>" + (o["workshop"] === undefined ? '' : (o['workshop'])) + "</td>";
                    body += "<td>" + (o["machineOdd"] === undefined ? '' : (o['machineOdd'])) + "</td>";
                    body += "<td>" + (o["controlMachineType"] === undefined ? '' : (o['controlMachineType'])) + "</td>";
                    body += "<td>" + (o["tubeType"] === undefined ? '' : (o['tubeType'])) + "</td>";
                    body += "<td>" + (o["craftDate"] === undefined ? '' : (o['craftDate'])) + "</td>";
                    body += "<td>" + (o["realityDate"] === undefined ? '' : (o['realityDate'])) + "</td>";
                    body += "<td>" + (o["MachineNo"] === undefined ? '' : (o['MachineNo'])) + "</td>";
                    body += "<td>" + (o["MachineName"] === undefined ? '' : (o['MachineName'])) + "</td>";
                    body += "<td>" + (o["BatchName"] === undefined ? '' : (o['BatchName'])) + "</td>";
                    body += "<td>" + (o["UserBatchNo"] === undefined ? '' : (o['UserBatchNo'])) + "</td>";

                    body += "<td>" + (o["CustomerName"] === undefined ? '' : (o['CustomerName'])) + "</td>";
                    body += "<td>" + (o["StartDateTime"] === undefined ? '' : (o['StartDateTime'])) + "</td>";
                    body += "<td>" + (o["EndDateTime"] === undefined ? '' : (o['EndDateTime'])) + "</td>";
                    body += "<td>" + (o["RunTime"] === undefined ? '' : (o['RunTime'])) + "</td>";
                    body += "<td>" + (o["CC_RunTime"] === undefined ? '' : (o['CC_RunTime'])) + "</td>";
                    body += "<td>" + (o["Order_Name"] === undefined ? '' : (o['Order_Name'])) + "</td>";
                    body += "<td>" + (o["Order_Weight"] === undefined ? '' : (o['Order_Weight'])) + "</td>";
                    body += "<td>" + (o["Cloth_Mode"] === undefined ? '' : (o['Cloth_Mode'])) + "</td>";
                    body += "<td>" + (o["Color_Number"] === undefined ? '' : (o['Color_Number'])) + "</td>";
                    body += "<td>" + (o["Operator"] === undefined ? '' : (o['Operator'])) + "</td>";

                    body += "<td>" + (o["CC_Recipe"] === undefined ? '' : (o['CC_Recipe'])) + "</td>";
                    body += "<td>" + (o["Working_Mode"] === undefined ? '' : (o['Working_Mode'])) + "</td>";
                    body += "<td>" + (o["DyeProgName1"] === undefined ? '' : (o['DyeProgName1'])) + "</td>";
                    body += "<td>" + (o["DyeProgName2"] === undefined ? '' : (o['DyeProgName2'])) + "</td>";
                    body += "<td>" + (o["DyeProgName3"] === undefined ? '' : (o['DyeProgName3'])) + "</td>";
                    body += "<td>" + (o["DyeProgName4"] === undefined ? '' : (o['DyeProgName4'])) + "</td>";
                    body += "<td>" + (o["DyeProgName5"] === undefined ? '' : (o['DyeProgName5'])) + "</td>";
                    body += "<td>" + (o["DyeProgName6"] === undefined ? '' : (o['DyeProgName6'])) + "</td>";
                    body += "<td>" + (o["DyeProgName7"] === undefined ? '' : (o['DyeProgName7'])) + "</td>";
                    body += "<td>" + (o["DyeProgName8"] === undefined ? '' : (o['DyeProgName8'])) + "</td>";

                    body += "<td>" + (o["DyeProgName9"] === undefined ? '' : (o['DyeProgName9'])) + "</td>";
                    body += "<td>" + (o["DyeProgName10"] === undefined ? '' : (o['DyeProgName10'])) + "</td>";
                    body += "<td>" + (o["DyeProgName11"] === undefined ? '' : (o['DyeProgName11'])) + "</td>";
                    body += "<td>" + (o["DyeProgName12"] === undefined ? '' : (o['DyeProgName12'])) + "</td>";
                    body += "<td>" + (o["DyeProgName13"] === undefined ? '' : (o['DyeProgName13'])) + "</td>";
                    body += "<td>" + (o["DyeProgName14"] === undefined ? '' : (o['DyeProgName14'])) + "</td>";
                    body += "<td>" + (o["DyeProgName15"] === undefined ? '' : (o['DyeProgName15'])) + "</td>";
                    body += "<td>" + (o["DyeProg1_ID"] === undefined ? '' : (o['DyeProg1_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg2_ID"] === undefined ? '' : (o['DyeProg2_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg3_ID"] === undefined ? '' : (o['DyeProg3_ID'])) + "</td>";

                    body += "<td>" + (o["DyeProg4_ID"] === undefined ? '' : (o['DyeProg4_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg5_ID"] === undefined ? '' : (o['DyeProg5_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg6_ID"] === undefined ? '' : (o['DyeProg6_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg7_ID"] === undefined ? '' : (o['DyeProg7_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg8_ID"] === undefined ? '' : (o['DyeProg8_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg9_ID"] === undefined ? '' : (o['DyeProg9_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg10_ID"] === undefined ? '' : (o['DyeProg10_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg11_ID"] === undefined ? '' : (o['DyeProg11_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg12_ID"] === undefined ? '' : (o['DyeProg12_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg13_ID"] === undefined ? '' : (o['DyeProg13_ID'])) + "</td>";

                    body += "<td>" + (o["DyeProg14_ID"] === undefined ? '' : (o['DyeProg14_ID'])) + "</td>";
                    body += "<td>" + (o["DyeProg15_ID"] === undefined ? '' : (o['DyeProg15_ID'])) + "</td>";
                    body += "<td>" + (o["Loading"] === undefined ? '' : (o['Loading'])) + "</td>";
                    body += "<td>" + (o["Ratio1"] === undefined ? '' : (o['Ratio1'])) + "</td>";
                    body += "<td>" + (o["Ratio2"] === undefined ? '' : (o['Ratio2'])) + "</td>";
                    body += "<td>" + (o["Ratio3"] === undefined ? '' : (o['Ratio3'])) + "</td>";
                    body += "<td>" + (o["Ratio4"] === undefined ? '' : (o['Ratio4'])) + "</td>";
                    body += "<td>" + (o["Ratio5"] === undefined ? '' : (o['Ratio5'])) + "</td>";
                    body += "<td>" + (o["Tank_Ratio1"] === undefined ? '' : (o['Tank_Ratio1'])) + "</td>";
                    body += "<td>" + (o["Tank_Ratio2"] === undefined ? '' : (o['Tank_Ratio2'])) + "</td>";

                    body += "<td>" + (o["Tank_Ratio3"] === undefined ? '' : (o['Tank_Ratio3'])) + "</td>";
                    body += "<td>" + (o["Tank_Ratio4"] === undefined ? '' : (o['Tank_Ratio4'])) + "</td>";
                    body += "<td>" + (o["Tank_Ratio5"] === undefined ? '' : (o['Tank_Ratio5'])) + "</td>";
                    body += "<td>" + (o["Tank_Ratio6"] === undefined ? '' : (o['Tank_Ratio6'])) + "</td>";
                    body += "<td>" + (o["Tank_Ratio7"] === undefined ? '' : (o['Tank_Ratio7'])) + "</td>";
                    body += "<td>" + (o["Tank_Ratio8"] === undefined ? '' : (o['Tank_Ratio8'])) + "</td>";
                    body += "<td>" + (o["PressureCtrl_1"] === undefined ? '' : (o['PressureCtrl_1'])) + "</td>";
                    body += "<td>" + (o["PressureCtrl_2"] === undefined ? '' : (o['PressureCtrl_2'])) + "</td>";
                    body += "<td>" + (o["PressureCtrl_3"] === undefined ? '' : (o['PressureCtrl_3'])) + "</td>";
                    body += "<td>" + (o["Target_Temp_1"] === undefined ? '' : (o['Target_Temp_1'])) + "</td>";

                    body += "<td>" + (o["Target_Temp_2"] === undefined ? '' : (o['Target_Temp_2'])) + "</td>";
                    body += "<td>" + (o["Target_Temp_3"] === undefined ? '' : (o['Target_Temp_3'])) + "</td>";
                    body += "<td>" + (o["Target_Temp_4"] === undefined ? '' : (o['Target_Temp_4'])) + "</td>";
                    body += "<td>" + (o["Target_Temp_5"] === undefined ? '' : (o['Target_Temp_5'])) + "</td>";
                    body += "<td>" + (o["Target_Temp_6"] === undefined ? '' : (o['Target_Temp_6'])) + "</td>";
                    body += "<td>" + (o["HoldTime_1"] === undefined ? '' : (o['HoldTime_1'])) + "</td>";
                    body += "<td>" + (o["HoldTime_2"] === undefined ? '' : (o['HoldTime_2'])) + "</td>";
                    body += "<td>" + (o["HoldTime_3"] === undefined ? '' : (o['HoldTime_3'])) + "</td>";
                    body += "<td>" + (o["HoldTime_4"] === undefined ? '' : (o['HoldTime_4'])) + "</td>";
                    body += "<td>" + (o["HoldTime_5"] === undefined ? '' : (o['HoldTime_5'])) + "</td>";

                    body += "<td>" + (o["HoldTime_6"] === undefined ? '' : (o['HoldTime_6'])) + "</td>";
                    body += "<td>" + (o["MainPump_Speed_Set_1"] === undefined ? '' : (o['MainPump_Speed_Set_1'])) + "</td>";
                    body += "<td>" + (o["MainPump_Speed_Set_2"] === undefined ? '' : (o['MainPump_Speed_Set_2'])) + "</td>";
                    body += "<td>" + (o["MainPump_Speed_Set_3"] === undefined ? '' : (o['MainPump_Speed_Set_3'])) + "</td>";
                    body += "<td>" + (o["Roller_Speed_Set_1"] === undefined ? '' : (o['Roller_Speed_Set_1'])) + "</td>";
                    body += "<td>" + (o["Roller_Speed_Set_2"] === undefined ? '' : (o['Roller_Speed_Set_2'])) + "</td>";
                    body += "<td>" + (o["Roller_Speed_Set_3"] === undefined ? '' : (o['Roller_Speed_Set_3'])) + "</td>";
                    body += "<td>" + (o["Mul_Value"] === undefined ? '' : (o['Mul_Value'])) + "</td>";
                    body += "<td>" + (o["Fix_Vol"] === undefined ? '' : (o['Fix_Vol'])) + "</td>";
                    body += "<td>" + (o["Debt_Vol_Word"] === undefined ? '' : (o['Debt_Vol_Word'])) + "</td>";

                    body += "<td>" + (o["Debt_Percentage"] === undefined ? '' : (o['Debt_Percentage'])) + "</td>";
                    body += "<td>" + (o["Fan_Speed_1"] === undefined ? '' : (o['Fan_Speed_1'])) + "</td>";
                    body += "<td>" + (o["Fan_Speed_2"] === undefined ? '' : (o['Fan_Speed_2'])) + "</td>";
                    body += "<td>" + (o["Fan_Speed_3"] === undefined ? '' : (o['Fan_Speed_3'])) + "</td>";
                    body += "<td>" + (o["Plater_Speed_1"] === undefined ? '' : (o['Plater_Speed_1'])) + "</td>";
                    body += "<td>" + (o["Plater_Speed_2"] === undefined ? '' : (o['Plater_Speed_2'])) + "</td>";
                    body += "<td>" + (o["Plater_Speed_3"] === undefined ? '' : (o['Plater_Speed_3'])) + "</td>";
                    body += "<td>" + (o["Nozzle_Pos_Set_1"] === undefined ? '' : (o['Nozzle_Pos_Set_1'])) + "</td>";
                    body += "<td>" + (o["Nozzle_Pos_Set_2"] === undefined ? '' : (o['Nozzle_Pos_Set_2'])) + "</td>";
                    body += "<td>" + (o["Nozzle_Pos_Set_3"] === undefined ? '' : (o['Nozzle_Pos_Set_3'])) + "</td>";

                    body += "<td>" + (o["Water_Vol1_Total"] === undefined ? '' : (o['Water_Vol1_Total'])) + "</td>";
                    body += "<td>" + (o["Water_Vol2_Total"] === undefined ? '' : (o['Water_Vol2_Total'])) + "</td>";
                    body += "<td>" + (o["Water_Vol3_Total"] === undefined ? '' : (o['Water_Vol3_Total'])) + "</td>";
                    body += "<td>" + (o["Water_Vol4_Total"] === undefined ? '' : (o['Water_Vol4_Total'])) + "</td>";
                    body += "<td>" + (o["Steam_Vol_Total"] === undefined ? '' : (o['Steam_Vol_Total'])) + "</td>";
                    body += "<td>" + (o["Power_Total"] === undefined ? '' : (o['Power_Total'])) + "</td>";
                    body += "<td>" + (o["CC_Water_Vol1_Total"] === undefined ? '' : (o['CC_Water_Vol1_Total'])) + "</td>";
                    body += "<td>" + (o["CC_Water_Vol2_Total"] === undefined ? '' : (o['CC_Water_Vol2_Total'])) + "</td>";
                    body += "<td>" + (o["CC_Water_Vol3_Total"] === undefined ? '' : (o['CC_Water_Vol3_Total'])) + "</td>";
                    body += "<td>" + (o["CC_Water_Vol4_Total"] === undefined ? '' : (o['CC_Water_Vol4_Total'])) + "</td>";

                    body += "<td>" + (o["CC_Steam_Vol_Total"] === undefined ? '' : (o['CC_Steam_Vol_Total'])) + "</td>";
                    body += "<td>" + (o["UpdateTime"] === undefined ? '' : (o['UpdateTime'])) + "</td>";
                    body += "</tr>";
                })
                tableToXlsx(head, '染缸生产记录中控查询', body)
            }
        }

        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
                               <head><meta charset="UTF-8"></head>
                               <body><table border="1"><tr>${head}</tr>${body}</table></body>
                            </html>`
            const a = document.createElement('a')
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)))
            a.download = filename
            a.click()
            document.removeChild(a)
        }

        const handleChange = (_data: any) => {
            table.handleSuccess(_data);
        }
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            width:150
        }

        const headerShow = ref<boolean>(true)
        const localeText1: any = ref(localeText)
        const pagingList1: any = ref(pagingList)
        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('DyeTankProduction01', gridOption, colState, tc)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        return {
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            colState,
            pagingList1,
            localeText1,
            defaultColDef,
            tc,
            gridOption,
            gridReady,
            total,
            PageSize,
            change1,
            page,
            size,
            dataForm,
            selectedRowKeys,
            pagination,
            tableColumns,
            table,
            rowKey,
            pageData,
            selectHandler,
            exports,
            headerShow,
            handleChange,
            onSelect(dateString: any, date: any) {
                pageData.dropDownData = {
                    startDate: dateString[0],
                    endDate: dateString[1],
                }
            },
            onClear() {
                pageData.dropDownData = {}
            },
        };
    },
    components: { Toolbar,  }
}
</script>
<style scoped lang="less"></style>